import React, { Component } from 'react';
import { Button, Image, Modal, Form, Input, Radio, Checkbox, Col, Row, InputNumber, Switch } from 'antd';
import GoBack from "@/components/TheGoBack";
import { apServiceProviderId, apiServiceProviderReview } from '@/request/callServicer/servicer'
import TheButton from '@/components/TheButton'
import './style.less'
const { confirm } = Modal;

const { TextArea } = Input;
export default class AuthDetail extends Component {
  formRef = React.createRef()
  constructor(props) {
    super(props)
    this.reviewRef = React.createRef()
    this.formRef = React.createRef()
    this.state = {
      infos: {
        serviceProviderId: '服务者ID',
        nickName: '昵称',
        approvalStatus: '申请单状态',
        memberCreatedTime: '注册时间',
        createTime: '申请时间',
        name: '姓名',
        mobile: '手机号',
        wxNumber: '微信号',
        occupationClass: '职业类型',
        serviceRange: '服务范围',
        area: '地区',
        address: "详细地址",
      },
      imgs: {
        idCardFront: '身份证人像面',
        idCardBack: '身份证国徽面',
        zmImages: '芝麻信用截图',
        petImages: '与宠物的合照',
      },
      serviceForm: {
        skillImages: ""
      },
      previewVisible: false,
      serviceProviderId: '',
      dataSource: {},
      mode: 'Y',
      previewImgList: [],
    }
  }
  componentDidMount() {
    console.log(this.props.match.params.id);
    this.setState({
      serviceProviderId: this.props.match.params.id,
      mode: this.props.match.params.mode || 'view'
    }, () => {
      this.getDetail()
    })

  }
  getDetail = () => {
    const { serviceProviderId } = this.state
    apServiceProviderId({
      serviceProviderId
    }).then(res => {
      if (res.code == 0) {

        const {
          skillImages,
          approvalStatus
        } = res.data
        let approvalStatusTxt = ''
        if (approvalStatus == 0) {
          approvalStatusTxt = '待审批'
        } else if (approvalStatus == 1) {
          approvalStatusTxt = '已通过'
        } else if (approvalStatus == 2) {
          approvalStatusTxt = '已驳回'
        } else if (approvalStatus == 3) {
          approvalStatusTxt = '已撤回'
        }
        this.setState({
          dataSource: {
            ...res.data,
            approvalStatus: approvalStatusTxt
          }
        })
        this.formRef.current.setFieldsValue({
          skillImages,
        })
      }
    })
  }

  checkDay = (day) => {
    const values = this.formRef.current.getFieldValue()
    this.setState({
      curServiceDay: values.serviceDayTimes && values.serviceDayTimes.hasOwnProperty(day) ? values.serviceDayTimes[day] : []
    })
  }
  onPass = (values) => {
    confirm({
      title: '提醒',
      content: '审核通过后，仍需要对该服务者进行服务培训，培训完成后修改该服务者的服务技能之后，该服务者打开对应服务的接单状态后，方可开始正式接单！是否继续通过审核？',
      okText: '通过',
      cancelText: '取消',
      onOk: () => {
        apiServiceProviderReview({
          serviceProviderId: this.state.serviceProviderId,
          approvalStatus: 1,
          approvalMsg: ''
        }).then(res => {
          if (res.code == 0) {
            React.$message({ type: 'success', content: `操作成功` })
            this.getData()
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  onReject = () => {
    this.reviewRef.current.validateFields().then(async values => {
      apiServiceProviderReview({
        serviceProviderId: this.state.serviceProviderId,
        approvalStatus: 2,
        approvalMsg: values.approvalMsg
      }).then(res => {
        if (res.code == 0) {
          React.$message({ type: 'success', content: `操作成功` })
          this.getData()
        }
      })
    })
  }
  openReject = () => {
    this.setState({
      isModalVisible: true
    }, () => {

    })
  }
  closeReject = () => {
    this.reviewRef.current.resetFields()
    this.setState({
      isModalVisible: false
    })
  }
  render() {
    const { infos, imgs, dataSource, isModalVisible, curServiceDay, mode, previewVisible, previewImgList } = this.state
    return (
      <div className='p-layout-box'>
        <GoBack history={this.props.history} title={"基础信息"} />
        <div className="content" style={{ width: '100%', fontSize: 14 }}>
          <Row style={{ width: "100%" }}>
            {
              Object.keys(infos).map(key => {
                return (
                  <Col span={8} className="li" style={{ margin: '10px 0' }}>
                    <span className='label'>{infos[key]}：</span>
                    <span className='value'>&nbsp;&nbsp;{infos[key] === '服务范围' ? React.$transNum(dataSource[key], 0, -3) + 'km' : dataSource[key]}</span>
                  </Col>
                )
              })
            }
          </Row>
          <Row className='imgs'>
            {
              Object.keys(imgs).map(key => {
                let imgLength = dataSource[key] ? `(共${dataSource[key].split(',').length}张)` : ''
                return (
                  <Col span={4} className="li">
                    <div className='label'>{imgs[key]}{imgLength}</div>
                    {
                      dataSource[key] ? <div>
                        <Image
                          style={{
                            width: 100,
                            height: 100,
                          }}
                          className='img'
                          src={dataSource[key].split(',')[0]}
                          preview={{
                            visible: false,
                          }}
                          onClick={() => this.setState({
                            previewVisible: true,
                            previewImgList: dataSource[key].split(',')
                          })}
                        />
                      </div> : '无'
                    }
                  </Col>
                )
              })
            }
            {/* {
              Object.keys(imgs).map(key => {
                return (
                  <Col span={4} className="li" style={{ margin: '10px 0' }}>
                    <div className='label'>{imgs[key]}:</div>
                    {
                      dataSource[key] ? dataSource[key].split(',').map(item => {
                        return <Image
                          className='img'
                          src={item}
                          preview={{
                            visible: false,
                          }}
                          onClick={() => this.setState({
                            previewVisible: true,
                            previewImgList: dataSource[key].split(',')
                          })}
                        />
                      }) : '无'
                    }
                  </Col>
                )
              })
            } */}
          </Row>
          <div className='module-title'>
            服务信息
          </div>
          <div style={{ display: 'flex' }}>
            <div>相关证书：</div>
            {
              dataSource.skillImages && dataSource.skillImages.split(',').map(item => {
                return <Image
                  className='img'
                  style={{
                    width: 100,
                    height: 100,
                  }}
                  src={item}
                  preview={{
                    visible: false,
                  }}
                  onClick={() => this.setState({
                    previewVisible: true,
                    previewImgList: dataSource['skillImages'].split(',')
                  })}
                />
              })
            }
          </div>
          <Form
            name="validate_other"
            ref={this.formRef}
            onFinish={this.onFinish}

          >


            {
              dataSource.approvalStatus == 0 ?
                <Form.Item
                  wrapperCol={{
                    span: 12,
                    offset: 6,
                  }}
                >
                  <TheButton haspermi={['call:servicerApplyList:reject']} style={{ marginRight: 20 }} onClick={() => this.openReject(2)}>
                    驳回
                  </TheButton>
                  <TheButton  haspermi={['call:servicerApplyList:pass']} type="primary" onClick={() => this.onPass(1)} >
                    通过
                  </TheButton>

                </Form.Item> : <Form.Item
                  wrapperCol={{
                    span: 12,
                    offset: 6,
                  }}
                >
                  <Button style={{ marginRight: 20 }} onClick={this.props.history.goBack}>
                    返回
                  </Button>
                </Form.Item>
            }
          </Form>
        </div>
        <div
          style={{
            display: 'none',
          }}
        >
          <Image.PreviewGroup
            preview={{
              visible: previewVisible,
              onVisibleChange: (vis) => this.setState({
                previewVisible: vis
              }),
            }}
          >
            {
              previewImgList.map(item => {
                return <Image src={item} />
              })
            }
          </Image.PreviewGroup>
        </div>
        <Modal title="驳回申请" visible={isModalVisible} okText="驳回申请" onOk={() => this.onReject(2)} onCancel={() => this.closeReject()}  >
          <Form
            ref={this.reviewRef}
            name="basic"
            layout={'vertical'}
            autoComplete="off"
          >
            <Form.Item
              hidden
              name="approvalStatus"
            ><Input></Input>
            </Form.Item>
            <Form.Item
              hidden
              name="serviceProviderId"
            ><Input></Input>
            </Form.Item>
            <Form.Item
              label="说明:"
              required
              name="approvalMsg"
              rules={[
                {
                  required: true,
                  message: '请输入驳回原因及建议的整改措施',
                }
              ]}
            >
              <TextArea maxLength={200} placeholder='请输入驳回原因及建议的整改措施' />
            </Form.Item>
          </Form>
        </Modal>
      </div >
    );
  }
}
